import * as React from 'react';


export interface SpinnerProps {
    show: boolean;
}

export interface SpinnerState {
    show: boolean;
}

export class Spinner extends React.Component<SpinnerProps, SpinnerState> {
    spinnerTimeout:number = 0;

    constructor(props) {
        super(props);
        this.state = {
            show: !!props.show
        }
    }

    show() {
        if (!this.spinnerTimeout) {
            this.spinnerTimeout = window.setTimeout(() => {
                this.setState({show: true});
            }, 400);
        }
    }

    hide() {
        this.setState({show: false}, ()=> {
            window.clearTimeout(this.spinnerTimeout);
        })
    }

    render() {
        let className = 'spinner';
        if (this.state.show) {
            className += ' is-active';
        }
        return (
            <span className={className} />
        );
    }
}
